<template>
	<view class="todo-list">
		<view class="todo-task-list">
			<view v-for="taskTodoListItem in taskTodoList" :key="taskTodoListItem.id" class="simple-card todo-list-card"
				@click="onShowTaskDetail(taskTodoListItem)">
				<view class="simple-header" style="width: 100%">
					<view class="simple-title" style="width: 100%">
						<view class="simple-status" style="min-width: 3.75rem">
							<u-tag :text="taskTodoListItem.statusName"  color="#fff" :border-color="plan[taskTodoListItem.statusName]" size="mini"
								:bg-color="plan[taskTodoListItem.statusName]">
							</u-tag>
						</view>
						<view class="simple-title-text">
							<span>{{ taskTodoListItem.checkName }}</span>
						</view>
					</view>
					<view style="color: rgb(0, 108, 255); font-size: 13px">查看>>></view>
				</view>
				<view class="simple-card-content">
					<view class="simple-card-content-row">
						<view>
							<u-icon name="clock" />
							<span style="margin-left: 0.3rem">计划开始时间：</span>
							<span>{{ parseTime(taskTodoListItem["planStartTime"]) }}</span>
						</view>
					</view>
				</view>
				<view class="simple-card-content">
					<view class="simple-card-content-row">
						<view>
							<u-icon name="account" />
							<span style="margin-left: 0.3rem">计划结束时间：</span>
							<span>{{ taskTodoListItem["planEndTime"] }}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-for="workOrderTodoListItem in workOrderTodoList" :key="workOrderTodoListItem.id"
			class="simple-card todo-list-card" @click="onShowWorkOrderDetail(workOrderTodoListItem)">
			<view class="simple-header">
				<view class="simple-title">
					<view class="simple-status">
						<u-tag bg-color="#006CFF" color="#fff" size="mini" :border-color="taskTypeColor[taskTodoListItem.type]" :text="workOrderTodoListItem["status" + "str"]"></u-tag>
					</view>
					<view class="simple-title-text">
						<span>{{ workOrderTodoListItem["title"] }}</span>
					</view>
				</view>

				<view style="color: rgb(2, 144, 0); font-size: 13px">待办工单</view>
			</view>
			<view class="simple-card-content">
				<view class="simple-card-content-row">
					<view>
						<u-icon name="clock" />
						<span style="margin-left: 0.3rem">时间：</span>
						<span>{{
              parseTime(workOrderTodoListItem["create" + "time"])
            }}</span>
					</view>
				</view>
			</view>
		</view>
		<!-- <tabbar></tabbar> -->
	</view>
</template>

<script>
	import tabbar from '../../components/tabbar/index.vue';
	import {
		taskTypeColor,
		taskTypeOptions,
		plan
	} from "../../constants/taskConstant";
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				list: [],
				todoTaskText: "待办任务",
				todoWorkOrderText: "待办工单",
				taskTodoList: [],
				workOrderTodoList: [],
				todoType: " 任务",
				taskTypeColor: [],
				plan: [],
				taskTypeOptions: [],
			}
		},
		onShow() {
			this.getList();
		},
		mounted() {
			this.taskTypeColor = taskTypeColor;
			this.taskTypeOptions = taskTypeOptions;
			this.plan = plan
			// this.getList();
		},
		methods: {
			getList() {
				this.$request('', '/offlineInspection/check/plan/myList?checkName=&status=0', 'get', {}, {}, ).then(res => {
					const {
						data
					} = res;
					// console.log(rows)
					this.taskTodoList = data;
				})
			},
			goPage(e) {
				console.log(e)
				if (e.name == 'Go card') {
					uni.navigateTo({
						url: '/pages/index/destination'
					})
				} else {
					this.$refs.uToast.show({
						title: '暂未开放',
						type: 'error'
					})
				}
			},
			onShowTaskDetail (val) {
				console.log(val)
				uni.navigateTo({
					url:'/pages/Inventory/detail?id=' + val.id
				})
			},
			
			/**
			 * 处理时间
			 */
			parseTime(time, pattern) {
			      if (arguments.length === 0 || !time) {
			        return null;
			      }
			      const format = pattern || "{y}-{m}-{d} {h}:{i}:{s}";
			      let date;
			      if (typeof time === "object") {
			        date = time;
			      } else {
			        if (typeof time === "string" && /^[0-9]+$/.test(time)) {
			          time = parseInt(time);
			        } else if (typeof time === "string") {
			          time = time
			            .replace(new RegExp(/-/gm), "/")
			            .replace("T", " ")
			            .replace(new RegExp(/\.[\d]{3}/gm), "");
			        }
			        if (typeof time === "number" && time.toString().length === 10) {
			          time = time * 1000;
			        }
			        date = new Date(time);
			      }
			      const formatObj = {
			        y: date.getFullYear(),
			        m: date.getMonth() + 1,
			        d: date.getDate(),
			        h: date.getHours(),
			        i: date.getMinutes(),
			        s: date.getSeconds(),
			        a: date.getDay(),
			      };
			      const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
			        let value = formatObj[key];
			        // Note: getDay() returns 0 on Sunday
			        if (key === "a") {
			          return ["日", "一", "二", "三", "四", "五", "六"][value];
			        }
			        if (result.length > 0 && value < 10) {
			          value = "0" + value;
			        }
			        return value || 0;
			      });
			      return time_str;
			    }
		}
	}
</script>

<style lang="scss" scoped>
	.todo-list {
		overflow: scroll;
		background-color: #fff;
		height: 100vh;

		.todo-list-card {
			+.todo-list-card {
				margin-top: 10rpx;
			}

			.simple-card-content {
				color: #aaaaaa;
			}
		}
	}

	.todo-task-list {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	
	.simple-card-content{
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.simple-header {
	    align-items: center;
	    justify-content: space-between;
	    display: flex;
		padding: 20rpx;
	    .simple-title {
	      align-items: center;
	      display: flex;
	      max-width: 75%;
	
	      .simple-status, .simple-title-text {
	        display: flex;
	        align-items: center;
	      }
	      .simple-title-text{
	        font-weight: bold;
	      }
	      .simple-status {
	        margin-right: .25rem;
	        .van-tag {
	          min-width: 2.75rem;
	          line-height: 1.25rem;
	          justify-content: center;
	        }
	      }
	    }
	  }
</style>